<template>
  <el-dialog
    :title="$t('DETAILS_ALARM')"
    class="largeDialog largetable"
    :visible.sync="alarmDetailVisible"
    width="40%"
    @close="$emit('close')"
  >
    <div class="flex flex-wrap dialog-detail ">
      <div class="w-50">
        <span class="title-label">{{ $t('BELONGS_REGION_STATION_NAME') }}:</span>
        <span>{{ tableSelected.regionTextNames || '--' }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('BELONGS_ROOM_NAME') }}:</span>
        <span>{{ tableSelected.roomName || '--' }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('STATION_STATUS') }}:</span>
        <span>{{ tableSelected.stationStatusText || '--' }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('DEVICE_CODE') }}:</span>
        <span>{{ tableSelected.deviceId || '--' }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('ALARM_TYPE') }}:</span>
        <span>{{ tableSelected.alarmTypeText || '--' }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('ALARM_LEVEL') }}:</span>
        <span>{{ tableSelected.alarmLevelText }}</span>
      </div>
      <div class="w-100">
        <span class="title-label">{{ $t('ALARM_DESCRIPTION') }}:</span>
        <span>{{ tableSelected.description }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('CONFIRM_REASON') }}:</span>
        <span>{{ tableSelected.confirmDesc }}</span>
      </div>
      <div v-if="viewType !== 'active'" class="w-50">
        <span class="title-label">{{ $t('CANCEL_REASON') }}:</span>
        <span>{{ tableSelected.cancelDesc }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('START_TIME') }}:</span>
        <span>{{ tableSelected.startTime || '--' }}</span>
      </div>
      <div v-if="viewType !== 'active'" class="w-50">
        <span class="title-label">{{ $t('END_TIME') }}:</span>
        <span>{{ tableSelected.endTime }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('CONFIRM_TIME') }}:</span>
        <span>{{ tableSelected.confirmTime || '--' }}</span>
      </div>
      <div v-if="viewType !== 'active'" class="w-50">
        <span class="title-label">{{ $t('CANCEL_TIME') }}:</span>
        <span>{{ tableSelected.cancelTime }}</span>
      </div>
      <div class="w-50">
        <span class="title-label">{{ $t('CONFIRMER') }}:</span>
        <span>{{ tableSelected.confirmer || '--' }}</span>
      </div>
    </div>
    <template v-slot:footer>
      <el-button @click="$emit('close')">{{ $t('CLOSE') }}</el-button>
    </template>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      viewType: {
        type: String,
        default: 'active'
      },
      tableSelected: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        alarmDetailVisible: false
      }
    },
    watch: {
      visible(newVal) {
        this.alarmDetailVisible = newVal
      }
    }
  }
</script>
